<template>
  <span>
    {{ day === 0 ? '' : `${day} : ` }}
    {{ hour === 0 ? '00 : ' : `${hour} : ` }}
    {{ minute === 0 ? '00 : ' : `${minute} : ` }}
    {{ second === 0 ? '00' : second }}
  </span>
</template>

<script>
import { mapState } from 'vuex';
// import { getTaskList } from '@/api';

export default {
  data: () => ({
    FinalTimeout: 5 * 60 * 1000,
    countTimeInMilliSeconds: undefined,
    // startTime: undefined,
    // endTime: undefined,
  }),
  computed: {
    day() {
      if (this.countTimeInMilliSeconds === undefined) return '00';
      const day = Math.floor(
        this.countTimeInMilliSeconds / 1000 / 60 / 60 / 24,
      );
      return day < 10 && day > 0 ? `0${day}` : day;
    },
    hour() {
      if (this.countTimeInMilliSeconds === undefined) return '00';
      const hour =
        Math.floor(this.countTimeInMilliSeconds / 1000 / 60 / 60) % 24;
      return hour < 10 && hour > 0 ? `0${hour}` : hour;
    },
    minute() {
      if (this.countTimeInMilliSeconds === undefined) return '00';
      const minute = Math.floor(this.countTimeInMilliSeconds / 1000 / 60) % 60;
      return minute < 10 && minute > 0 ? `0${minute}` : minute;
    },
    second() {
      if (this.countTimeInMilliSeconds === undefined) return '00';
      const second = Math.floor(this.countTimeInMilliSeconds / 1000) % 60;
      return second < 10 && second > 0 ? `0${second}` : second;
    },
    ...mapState(['READING_TIME', 'START_ANSWER_TIME']),
  },
  methods: {
    timeReduce() {
      this.countTimeInMilliSeconds =
        +new Date(this.START_ANSWER_TIME) - +Date.now();
      if (this.countTimeInMilliSeconds > 0) {
        setTimeout(this.timeReduce, 1000);
        this.finalTimeout();
      } else {
        this.$emit('timeout');
      }
    },
    finalTimeout() {
      if (this.countTimeInMilliSeconds <= this.FinalTimeout) {
        this.$emit('finalTimeout');
        this.finalTimeout = () => {};
      }
    },
  },
  mounted() {
    // const taskList = {
    //   page: {
    //     totalCount: 2,
    //     pageSize: 10,
    //     totalPage: 1,
    //     currPage: 1,
    //     list: [
    //       {
    //         taskId: 1,
    //         taskName: '阅读马拉松-阅读',
    //         bookUrl: '',
    //         tips: '注意阅读时间',
    //         startTime: '2021-04-16 14:00:00',
    //         endTime: '2021-04-16 17:08:00',
    //         paticipantesNum: 200,
    //       },
    //       {
    //         taskId: 2,
    //         taskName: '阅读马拉松-答题',
    //         bookUrl: '',
    //         tips: '',
    //         startTime: '2021-04-04 15:00:00',
    //         endTime: '2021-04-04 15:30:00',
    //         paticipantesNum: 200,
    //       },
    //     ],
    //   },
    // };
    // this.startTime = new Date(taskList.page.list[0].startTime);
    // this.endTime = new Date(taskList.page.list[0].endTime);
    // this.startTime = new Date(this.READING_TIME);
    // this.endTime = new Date(this.START_ANSWER_TIME);
    this.timeReduce();
  },
};
</script>

<style></style>
